<template>
    <div>
        <h2>会员信息显示</h2>
        <div>
            <button @click="add">新增</button><br/>
           姓名：<input type="text" v-model="state.name" />
           手机号： <input type="text" v-model="state.phone" />
            身份证号：<input type="text" v-model="state.idCard" />
           会员卡号： <input type="text" v-model="state.mCardNum" />
            开始时间：<input type="date" v-model="state.sdate" />
            结束时间：<input type="date" v-model="state.edate" />
            <button @click="getlist">查询</button>
        </div>
        <table class="table table-bordered ">
            <tr>
                <td>会员类型</td>
                <td>姓名</td>
                <td>手机号</td>
                <td>身份证号</td>
                <td>会员卡号</td>
                <td>登陆时间</td>
                <td>生日</td>
                <td>本店消费</td>
              
            </tr>
            <tr v-for="item in list">
                <td>{{item.mType}}</td>
                <td>{{item.name}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.idCard}}</td>
                <td>{{item.mCardNum}}</td>
                <td>{{item.date}}</td>
                <td>{{item.birthday}}</td>
                <td>{{item.money}}</td>
               
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
let data:any = reactive({
    state: {
        name:'',
        phone:'',
        idCard:'',
        mCardNum:'',
        sdate:'',
        edate:'',
    },
    list:[]
})
let {state,list}=toRefs(data)
onMounted(()=>{
    getlist()
})
const getlist=()=>{
    let obj={
        name:state.value.name,
        phone:state.value.phone,
        Idcard:state.value.idCard,
        sdate:state.value.sdate,
        edate:state.value.edate,
        Mcard:state.value.mCardNum,
    }
    axios({
        url:'/api/Member/MemberList',
method:'get',
params:obj
    })
    .then(res=>{
        console.log(res)
        list.value=res.data.data
    })
    .catch(err=>{
        console.log(err)
    })
}
const add=()=>{
    router.push("/add")
}


</script>

<style scoped>

</style>